<template>
  <!-- 主容器，点击屏幕时会打开弹出框 -->
  <view :class="['classBookRead', { 'night-mode': isNightMode }]" @click="openPopup">
    <!-- 返回按钮 -->
    <view class="backButton" @click.stop="goBack">
      <uni-icons type="left" size="30"></uni-icons>
    </view>
    <!-- 显示章节数 -->
    <view class="chapter">{{ chapterData.title }}</view>
    <!-- 分割线 -->
    <view class="divider"></view>
    <!-- 显示正文内容 -->
    <scroll-view class="textContent">
      {{ chapterData.content }}
    </scroll-view>
    <!-- 弹出菜单 -->
    <uni-popup ref="popup" type="bottom" :border-radius="'20px 20px 0 0'" :mask="true" :mask-blur="true">
      <!-- 弹出菜单内容容器 -->
      <view class="popupMenu">
        <!-- 导航按钮容器 -->
        <view class="navigation">
          <!-- 上一章和下一章按钮，去掉框，只显示文字 -->
          <text @click="previousChapter" class="nav-text">上一章</text>
          <text @click="nextChapter" class="nav-text">下一章</text>
        </view>
        <!-- 图标容器 -->
        <view class="icons">
          <!-- 目录图标 -->
          <uni-icons type="list" size="46" @click="openCatalog"></uni-icons>
          <!-- 夜间模式图标 -->
          <uni-icons :type="isNightMode ? 'eye-filled' : 'eye'" size="46" @click="toggleNightMode"></uni-icons>
        </view>
      </view>
    </uni-popup>
    <!-- 打开目录栏 -->
    <uni-popup ref="catalogPopup" type="left" :border-radius="'0 20px 20px 0'" :mask="true" :mask-blur="true">
      <view class="catalogMenu" :class="{ 'night-mode': isNightMode }">
        <scroll-view class="catalogList">
          <view v-for="item in allChaptersList" :key="item.chapterNumber" class="chapterItem" @click="goToChapter(item.chapterNumber)">
            {{ item.title }}
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { apiGetChapterRead, apiGetBookAllChapter, apiGetBookInfo } from '../../api/apis';

// chapterData用来存储本章节的内容
const chapterData = ref({});
// bookData用来存储书籍的数据
const bookData = ref({});
// 弹出框引用
const popup = ref(null);

//浏览历史阅读
const isDirectory = ref(false);

// onLoad 生命周期函数，在页面加载时调用
onLoad((e) => {
  bookData.bookId = e.bookId;
  chapterData.chapterNumber = e.chapterNumber;
  isDirectory.value = e.isDirectoryJump === 'true';
  getChapterData();
});

// 异步函数，获取书籍数据
const getChapterData = async () => {
  if (bookData.bookId && chapterData.chapterNumber) {
    const res = await apiGetChapterRead({
    novelId:bookData.bookId,
    chapterNumber:chapterData.chapterNumber,
    isDirectoryJump:isDirectory.value,
  });
  chapterData.value = res.data;
  chapterData.chapterNumber = res.data.chapterNumber;
  console.log(chapterData.chapterNumber);
  
  const response = await apiGetBookInfo({
    novelId: bookData.bookId
  });
  chapterData.chapterCount = response.data.totalChapters;
  }
}

// 打开弹出框的方法
function openPopup() {
  popup.value.open('bottom');
}

// 上一章按钮点击处理函数
function previousChapter() {
  if (chapterData.chapterNumber <= 1) {
    uni.showToast({ title: '当前已经是第一章啦！', icon: 'none' });
  } else {
    chapterData.chapterNumber--; // 在比较后再自减
    uni.navigateTo({
      url: `/pages/book/bookread?bookId=${bookData.bookId}&chapterNumber=${chapterData.chapterNumber}&isDirectoryJump=true`
    });
  }
}

// 下一章按钮点击处理函数
function nextChapter() {
  if (chapterData.chapterNumber >= chapterData.chapterCount) {
    uni.showToast({ title: '当前已经是最后一章啦！', icon: 'none' });
  } else {
    chapterData.chapterNumber++; // 在比较后再自增
    uni.navigateTo({
      url: `/pages/book/bookread?bookId=${bookData.bookId}&chapterNumber=${chapterData.chapterNumber}&isDirectoryJump=true`
    });
  }
}

// 打开目录的方法
const catalogPopup = ref(null);
const allChaptersList = ref([]);

const loadAllChapters = async () => {
  if (bookData.bookId) {
    const response = await apiGetBookAllChapter({
      novelId: bookData.bookId
    });
    // 将 response.data 进行处理，使 chapterNumber 从 1 开始计数
    allChaptersList.value = response.data.map((chapter, index) => {
      return {
        ...chapter,
        chapterNumber: index + 1
      };
    });
  }
};

// 打开目录
function openCatalog() {
  loadAllChapters();
  catalogPopup.value.open('left');
}

// 切换夜间模式的方法
const isNightMode = ref(false);

function toggleNightMode() {
  isNightMode.value = !isNightMode.value;
  // 将夜间模式状态保存到本地存储
    uni.setStorageSync('nightMode', isNightMode.value);
}
// 从本地存储中加载夜间模式状态
if (uni.getStorageSync('nightMode')) {
  isNightMode.value = uni.getStorageSync('nightMode');
}

// 跳转到指定章节
function goToChapter(chapterNumber) {
  uni.navigateTo({
    url: `/pages/book/bookread?bookId=${bookData.bookId}&chapterNumber=${chapterNumber}&isDirectoryJump=true`
  });
}

// 返回按钮点击处理函数
function goBack() {
  uni.navigateTo({
    url: `/pages/book/book?novelId=${bookData.bookId}`
  });
}
</script>

<style lang="scss" scoped>
/* 主容器样式 */
.classBookRead {
  background-color: #FFF9E5; /* 背景颜色为淡黄色，类似纸张 */
  padding: 10px; /* 内边距 */
  font-family: "Songti SC", serif; /* 字体为宋体 */
  color: #333; /* 文字颜色为深灰色 */
  height: 100vh; /* 高度设置为视口高度 */
  overflow-y: scroll; /* 允许垂直滚动 */
}

/* 返回按钮样式 */
.backButton {
  position: absolute; /* 绝对定位 */
  top: 10px; /* 距离顶部10px */
  left: 10px; /* 距离左边10px */
  z-index: 1000; /* 确保按钮位于最上层 */
}

/* 夜间模式样式 */
.night-mode {
  background-color: #333 !important;
  color: #FFF !important;
}

/* 章节标题样式 */
.chapter {
  font-size: 18px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  text-align: center; /* 居中对齐 */
  margin-bottom: 10px; /* 底部外边距 */
}

/* 分割线样式 */
.divider {
  border-bottom: 2px solid #333; /* 底部边框为粗线条 */
  margin-bottom: 10px; /* 底部外边距 */
}

/* 正文内容样式 */
.textContent {
  font-size: 26px; /* 字体大小 */
  text-align: justify; /* 两端对齐 */
  line-height: 1.8; /* 行高 */
  font-family: "Songti SC", serif; /* 字体为宋体 */
  margin-bottom: 20px; /* 底部外边距 */
  font-weight: bold; /* 字体加粗 */
}

/* 弹出菜单容器样式 */
.popupMenu {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  padding: 10px; /* 内边距 */
  background-color: white; /* 背景颜色为白色 */
  height: 20vh; /* 高度为视口高度的三分之一 */
  border-radius: 20px 20px 0 0; /* 上面两个角变为圆角20px，下面保持不变 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加阴影 */
}

/* 导航按钮容器样式 */
.navigation {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  width: 100%; /* 宽度为 100% */
  margin-bottom: 10px; /* 底部外边距 */
}

/* 导航按钮文本样式 */
.nav-text {
  font-size: 25px; /* 字体大小 */
  color: #333; /* 文字颜色 */
  cursor: pointer; /* 鼠标指针样式 */
  font-weight: bold; /* 字体加粗 */
  font-family: "Microsoft YaHei", sans-serif; /* 字体为雅黑 */
}

/* 图标容器样式 */
.icons {
  display: flex; /* 弹性布局 */
  justify-content: space-around; /* 平均分布 */
  width: 100%; /* 宽度为 100% */
  margin-top: 40px; /* 顶部外边距 */
}

.catalogMenu {
  width: 65vw;
  background-color: white;
  height: 100vh;
}

.catalogList {
  height: 100%;
  padding: 20px;
}

.chapterItem {
  padding: 20px;
  border-bottom: 2px solid #000; /* 改变线的颜色为黑色 */
  border-bottom-width: 1px; /* 改变线的宽度 */
  cursor: pointer;
  font-family: 'Microsoft YaHei', sans-serif; /* 字体改为微软雅黑 */
  font-weight: bold; /* 字体加粗 */
  font-size: 16px; /* 合适的字体大小 */
  width: 80%; /* 改变线的长度为元素宽度的80% */
  margin: 0 auto; /* 居中对齐 */
}
</style>
